<template>
  <div id="app" style="padding: 10px 0;margin: 0;">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- 视频定位播放器  -->
    <dv-border-box-12 style="position: relative;width: 96vw;height: 72vw;margin: auto;">
      <video-player ref="videoPlayer" :options="playerOptions" :playsinline="true"
        class="video-player vjs-custom-skin location" style="height: 90vw;"/>
    </dv-border-box-12>
    <!-- 信息展示 -->
    <div class="infoBox runstate" v-if="dataPage.alarmDb">
      运行状态：
      <div v-if="!dataPage.alarmDb.alarmcode || dataPage.alarmDb.alarmcode == 1" class="stateg">
        正常<img :src="norSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 2" class="stater">
        轿厢意外移动<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 4" class="stater">
        冲顶<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 8" class="stater">
        蹲底<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 16" class="stater">
        运行中开门<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 32" class="stater">
        超速<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 64" class="stater">
        断电报警<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 128" class="stater">
        一键报警<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 256" class="stater">
        检修按钮变化报警<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 512" class="stater">
        电梯长时间运行故障<img :src="errSrc" class="simg">
      </div>
      <div v-if="dataPage.alarmDb.alarmcode && dataPage.alarmDb.alarmcode == 1024" class="stater">
        电梯困人故障<img :src="errSrc" class="simg">
      </div>
    </div>
    <div v-if="dataPage && dataPage.keepalive" class="infoBox">
      <div v-if="dataPage.keepalive && dataPage.keepalive.createTime" class="infoItem"
        style="background-image: url('http://player.huixinhe.com/hert.png');">
        <div class="txt">
          <div>{{ dataPage.keepalive.createTime }}</div>
          <div class="small">最近心跳时间</div>
        </div>
      </div>
      <div v-if="dataPage.login && dataPage.login.createTime" class="infoItem"
        style="background-image: url('http://player.huixinhe.com/login.png');">
        <div class="txt">
          <div>{{ dataPage.login.createTime }}</div>
          <div class="small">最近登录时间</div>
        </div>
      </div>
      <div v-if="dataPage.openTimes && dataPage.openTimes.openTimes" class="infoItem"
        style="background-image: url('http://player.huixinhe.com/men.png');">
        <div class="txt">
          <div class="big">{{ dataPage.openTimes.openTimes }}</div>
          <div class="small">开关门次数</div>
        </div>
      </div>
      <div v-if="dataPage.dayAverage && dataPage.dayAverage" class="infoItem"
        style="background-image: url('http://player.huixinhe.com/dmen.png');">
        <div class="txt">
          <div class="big">{{ dataPage.dayAverage }}</div>
          <div class="small">日均开关门次数</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'App',
  data() {
    return {
      deviceCode: '',
      url: 'https://manger.huixinhe.com/sdtlt/device/timesInfo',
      dataPage: {},
      norSrc: 'http://player.huixinhe.com/normal.png',
      errSrc: 'http://player.huixinhe.com/error.png',
      // video-play
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //若是true,浏览器准备好时开始回放。
        muted: false, // 默认状况下将会消除任何音频。
        loop: false, // 致使视频一结束就从新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,当即开始加载视频（若是浏览器支持）
        language: 'zh-CN',
        aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该表明一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "application/x-mpegURL",//这里的种类支持不少种：基本视频格式、直播、流媒体等，具体能够参看git网址项目
          src: "" //url地址
        }],
        poster: "./assets/logo.png", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂没法播放，请稍后再试', //容许覆盖Video.js没法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      },

    }
  },
  created() {
    let url = window.location.href;
    console.log(url)
    // 获取参数部分
    let params = this.getUrlParams(url);
    if (params) {
      console.log(params)
      if (params.url) {
        let urlStr = decodeURIComponent(params.url);
        this.playerOptions.sources[0].src = urlStr;
      }
      if (params.deviceCode) {
        this.deviceCode = params.deviceCode
        this.loadData()
      }
    }

  },
  methods: {
    getUrlParams(url) {
      // 通过 ? 分割获取后面的参数字符串
      let urlStr = url.split('?')[1]
      // 创建空对象存储参数
      let obj = {};
      // 再通过 & 将每一个参数单独分割出来
      let paramsArr = urlStr.split('&')
      for (let i = 0, len = paramsArr.length; i < len; i++) {
        // 再通过 = 将每一个参数分割为 key:value 的形式
        let arr = paramsArr[i].split('=')
        obj[arr[0]] = arr[1];
      }
      return obj
    },
    loadData() {
      if (this.deviceCode) {
        // 请求设备信息
        axios(this.url + "?deviceId=" + this.deviceCode).then(res => {
          console.log(this.url, res)
          this.dataPage = res.data.result
          // 轮询请求
          setTimeout(() => {
            this.loadData()
          },  1000)
        })
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #081327;
  height: 100vh;
}

/**视频定位 */
.location {
  position: absolute;
  width: 90vw;
  height: 68vw !important;
  left: 10px;
  top: 10px;
}

/**展示信息 */
.infoBox {
  width: 96vw;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

/**每一项 */
.infoItem {
  margin-top: 5px;
  width: 45vw;
  height: 20vw;
  padding: 5px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  justify-content: end;
  background-size: 100%;
  background-repeat: no-repeat;
  align-items: center;
  color: #ffffff;
}

/**文字 */
.txt {
  width: 25vw;
}

.small {
  font-size: 12px;
}

.big {
  font-size: 24px;
}

/**运行状态 */
.runstate {
  color: #A1B9E6;
  background-color: #0E1E3F;
  width: 90vw;
  padding: 10px;
}

.stateg {
  display: flex;
  align-items: center;
}

.stater {
  display: flex;
  align-items: center;
  color: #D20000;
}

.simg {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}
</style>
